<template>
	<view class="content">
		<view class="noData" v-if="noList">
      <image class="img" src="/static/user/card.png" />
      <view class="text">啊哦，没有银行卡  </view>
	  </view>
     <view class="card-list">
          <view class="item" v-for="item in 4" :key="item">
              <image class="card" src="/static/user/card.png" />
              <view class="name">中国建设银行</view>
              <view class="type">储值卡</view>
              <view class="number">****4555</view>
          </view>
     </view>
    <view class="btnAdd" @click="btnAdd()">
        <text class="iconfont icon-tianjia" />  添加银行卡
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        noList:false
      }
		},    
		onLoad() 
		{
		},
		watch:{
    },
		methods: {
      btnAdd(){
        this.$api.goPage('/pages/user/addCard');
      }
		}
	}
</script>

<style  lang="scss" scoped>
	.content {
		 -webkit-overflow-scrolling: touch;
		 background-color: #f5f5f5;
     position: relative;
     padding-bottom: px2vw(30);
  }
  .card-list{
    padding: px2vw(30) 0;
    .item{
      height: px2vw(140);
      width: px2vw(346);
      position: relative;
      border-radius: px2vw(10);
      margin:- px2vw(50) auto 0 auto;
      .card{
              height: px2vw(60);
              width: px2vw(60);
              border-radius: px2vw(60);
              background-color: #fff;
              line-height: px2vw(60);
              text-align: center;
              position: absolute;
              left: px2vw(15);
              top: px2vw(15);
      }
      .type,
      .name{
        font-size: px2vw($fz18);
        color: #fff;
        padding-top: px2vw(20);
        padding-left: px2vw(90);
      }
      .type{
        font-size: px2vw($fz14);
        padding-top: px2vw(5);
      }
      .number{
        position: absolute;
        right: px2vw(15);
        top: px2vw(30);
        font-size: px2vw($fz18);
        color: #fff;
      }
    }
    .item:nth-child(1){
       margin:0 auto;
    }
    .item:nth-of-type(odd){  background-color: #FA4444;}
    .item:nth-of-type(even){ background-color: #2358D2;}
  }
  .noData{
    padding:px2vw(100) 0;
    .img{
      height: px2vw(73);
      width:  px2vw(73);
    }
    .text{
      text-align: center;
      font-size:px2vw($fz14);
      color: #888; 
      padding-top: px2vw(5);
    }
  }
  .btnAdd{
    width: px2vw(345);
    height: px2vw(110);
    line-height:  px2vw(110);
    border-radius: px2vw(10);
    background-color: #fff;
    margin: 0 auto;
    // position: absolute;
    // bottom:  px2vw(20);
    // left: 50%;
   // margin-left:- px2vw(172.5);
    text-align: center;
    color: #000;
    font-size:px2vw($fz18);
    font-weight: 600;
  }
</style>
